<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <a-form-model ref="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
        <h3 class="title">导航栏设置</h3>
        <a-form-model-item label="背景色" prop="name">
          <div class="flex">
            <a-input
              class="inp"
              type="text"
              :value="form.head.bg_color"
              @change="
                (e) =>
                  handle('change', {
                    value: e,
                    el: 'head',
                  })
              "
            />
            <a-input
              class="color"
              type="color"
              :value="form.head.bg_color"
              @change="
                (e) =>
                  handle('change', {
                    value: e,
                    el: 'head',
                  })
              "
            />
          </div>
        </a-form-model-item>
        <a-form-model-item label="背景图片" prop="name">
          <!-- <div class="flex">
            <a-input class="inpSrc" type="text" :value="form.head.bg_img" />
            <a-button type="primary" class="btn" @click="handle('file', { el: 'head' })">选择</a-button>
          </div> -->
          <CyyUploadImg
            @uploadSuccess="(e) => (form.head.bg_img = e.data)"
            @deleteImg="form.head.bg_img = ''"
            :imgSrc="form.head.bg_img"
            imgSizeText="750*128"
          >
          </CyyUploadImg>
        </a-form-model-item>

        <a-divider />
        <h3 class="title">模版设置</h3>
        <a-form-model-item label="背景色" prop="name">
          <div class="flex">
            <a-input
              class="inp"
              type="text"
              :value="form.body.bg_color"
              @change="
                (e) =>
                  handle('change', {
                    value: e,
                    el: 'body',
                  })
              "
            />
            <a-input
              class="color"
              type="color"
              :value="form.body.bg_color"
              @change="
                (e) =>
                  handle('change', {
                    value: e,
                    el: 'body',
                  })
              "
            />
          </div>
        </a-form-model-item>
        <a-form-model-item label="背景图片" prop="name">
          <!-- <div class="flex">
            <a-input class="inpSrc" type="text" :value="form.body.bg_img" />
            <a-button type="primary" class="btn" @click="handle('file', { el: 'body' })">选择</a-button>
          </div> -->
          <CyyUploadImg
            @uploadSuccess="(e) => (form.body.bg_img = e.data)"
            @deleteImg="form.body.bg_img = ''"
            :imgSrc="form.body.bg_img"
            imgSizeText="750*438，750*850"
          >
          </CyyUploadImg>
        </a-form-model-item>
        <a-divider />

        <div class="btnBox">
          <a-button v-loading="btnLoading" :disabled="disabled" type="primary" @click="onSubmit"> 提交 </a-button>
          <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
        </div>
      </a-form-model>
    </a-card>

    <storage-select
      placeholder="请选择图片"
      :hiddenInput="true"
      ref="chooseImg"
      selectNum="1"
      @onOk="(e) => handle('fileSuccess', e)"
    ></storage-select>
  </page-header-wrapper>
</template>

<script>
import { conf, confSave } from '@/api/marketing/activityNew'
import colorControl from '@/components/DiyNew/diy/baseControl/colorControl/index.vue'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    colorControl,
    CyyUploadImg: cyyUploadImg,
  },

  data() {
    return {
      btnLoading: false,
      disabled: false,
      form: {
        head: {
          bg_color: '#000000',
          bg_img: '',
        },
        body: {
          bg_color: '#000000',
          bg_img: '',
        },
      },

      fileName: '',
    }
  },

  methods: {
    handle(type, param) {
      switch (type) {
        case 'change':
          if (param.el === 'head') {
            this.$set(this.form.head, 'bg_color', param.value.target.value)
          } else if (param.el === 'body') {
            this.$set(this.form.body, 'bg_color', param.value.target.value)
          }
          break

        case 'file':
          this.fileName = param.el
          this.$refs.chooseImg.onClickUploadBtn()
          break

        case 'fileSuccess':
          if (this.fileName === 'head') {
            this.$set(this.form.head, 'bg_img', param)
          } else if (this.fileName === 'body') {
            this.$set(this.form.body, 'bg_img', param)
          }
          break
      }
    },

    // 点击提交
    async onSubmit() {
      let form = JSON.parse(JSON.stringify(this.form))

      this.btnLoading = true
      const res = await confSave({
        conf: form,
      })
      this.btnLoading = false
      if (!res.code) {
        this.$message.success(res.msg)
        return
      }
      this.$message.error(res.msg)
    },
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await conf()
    hide()
    if (!res.code && res.data.conf) {
      let { conf } = res.data
      this.form = conf
    }
  },
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
  font-weight: bold;
}

.flex {
  display: flex;

  .inp {
    width: 98px;
    padding: 0 12px;
  }

  .color {
    margin-left: 9px;
    width: 32px;
    padding: 2px;
  }

  .inpSrc {
    margin-right: 12px;
    width: 468px;
  }
}

.btnBox {
  text-align: center;
}
</style>
